<template>
  <div class="detail_container">
    <van-nav-bar
      @click-left="$router.back()"
      left-arrow
      title="用户详情"
    />
    <van-list
      :finished="finished"
      @load="onLoad"
      finished-text="没有更多了"
      v-model="loading"
    >
      <div class="user_info">
        <van-image
          height="80"
          round
          :src="userInfo.photo"
          width="80"
        />
        <div class="name_desc">
          <div class="name">{{userInfo.name}}</div>
          <div class="desr">介绍：Just do IT</div>
        </div>
      </div>
      <article-item
        :article="item"
        :key="index"
        v-for="(item, index) in list"
        @click.native="$router.push(`/article/${item.art_id}`)"
      />
    </van-list>
  </div>
</template>

<script>
import { getUserSendArticles } from "../../network/article";
import { getUserById } from "../../network/user";
import ArticleItem from "../home/chi-coms/article-item";
export default {
  name: "UserDetail",
  components: { ArticleItem },
  computed: {},
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      page: 1,
      userInfo:{}
    };
  },
  created() {
    this.loadCurrnetUser()
  },
  mounted() {},
  methods: {
    async onLoad() {
      // console.log('加载中')
      const result = await getUserSendArticles(this.$route.params.userId, {
        page: this.page,
        perPage: 10
      });
      // console.log(result)
      const { results } = result.data;
      this.list.push(...results);
      this.page++;
      this.loading = false;
      if (results.length < 10) {
        this.finished = true;
      }
    },
    //获取指定用户信息
    async loadCurrnetUser() {
      const result = await getUserById(this.$route.params.userId)
      // console.log(result)
      this.userInfo = result.data || {}
    }
  }
};
</script>

<style scoped lang="stylus" >
.user_info
  background-color #fff
  display flex
  height 120px
  align-items center
  padding 0 10px

  .name_desc
    height 80px
    display flex
    flex-direction column
    justify-content space-evenly
    margin-left 15px

    .desr
      font-weight bold
      font-size 12px
      color gray

.detail_container
  padding-top 46px

  .van-nav-bar
    position fixed
    left 0
    right 0
    top 0
    height 46px
</style>